<template>
  <div class="bg-gray-100 min-h-screen">
    <!-- Store Navigation -->
    <header class="relative bg-gray-100">
      <nav aria-label="Top" class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="border-b border-gray-200">
          <div class="flex h-16 items-center">
            <!-- Mobile menu button - 优化触摸区域 -->
            <button type="button" class="relative rounded-md bg-gray-100 p-3 text-gray-400 lg:hidden active:bg-gray-200 transition-colors" @click="mobileMenuOpen = !mobileMenuOpen">
              <span class="absolute -inset-0.5" />
              <span class="sr-only">{{ mobileMenuOpen ? '关闭菜单' : '打开菜单' }}</span>
              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" v-if="!mobileMenuOpen">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" v-else>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
            <!-- Logo -->
            <div class="ml-4 flex lg:ml-0">
              <Link href="/" class="flex items-center">
                <span class="text-xl font-semibold text-gray-900">{{ systemSettings.site_name || 'Orange Tech' }}</span>
              </Link>
            </div>

            <!-- Center Navigation - 优化平板显示 -->
            <div class="hidden lg:flex lg:items-center lg:space-x-4 xl:space-x-8 ml-4 xl:ml-8">
              <!-- 分类导航 -->
              <div class="flex items-center space-x-4 xl:space-x-8">
                <div v-for="category in categories" :key="category.id" class="relative group">
                  <Link :href="`/categories/${category.slug}`" class="text-xs xl:text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors duration-200 whitespace-nowrap">
                    {{ category.name }}
                    <span class="absolute inset-x-0 -bottom-px z-30 h-0.5 bg-gray-900 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out" aria-hidden="true" />
                  </Link>
                  
                  <!-- 下拉菜单 (暂时注释) -->
                  <!-- <div class="absolute left-0 top-full z-50 w-screen bg-gray-100 text-sm text-gray-500 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200" style="position: fixed; left: 0; top: 64px;">
                    <div class="absolute inset-0 top-1/2 bg-gray-100 shadow" aria-hidden="true" />
                    <div class="relative bg-gray-100">
                      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                        <div class="grid grid-cols-2 gap-x-8 gap-y-10 py-16">
                          <div class="col-start-2 grid grid-cols-2 gap-x-8">
                            <div v-for="item in getFeaturedProducts(category.id)" :key="item.id" class="group/item relative text-base sm:text-sm">
                              <img :src="item.image" :alt="item.name" class="aspect-square w-full rounded-lg bg-gray-100 object-cover group-hover/item:opacity-75" />
                              <Link :href="`/products/${item.id}`" class="mt-6 block font-medium text-gray-900 hover:text-indigo-600">
                                <span class="absolute inset-0 z-10" aria-hidden="true" />
                                {{ item.name }}
                              </Link>
                              <p aria-hidden="true" class="mt-1 text-gray-600">¥{{ item.price }}</p>
                            </div>
                          </div>
                          <div class="row-start-1 grid grid-cols-3 gap-x-8 gap-y-10 text-sm">
                            <div v-for="subCategory in getSubCategories(category.id)" :key="subCategory.id">
                              <p :id="`${subCategory.name}-heading`" class="font-medium text-gray-900">{{ subCategory.name }}</p>
                              <ul role="list" :aria-labelledby="`${subCategory.name}-heading`" class="mt-6 space-y-6 sm:mt-4 sm:space-y-4">
                                <li class="flex">
                                  <Link :href="`/category/${category.id}/${subCategory.id}`" class="text-gray-600 hover:text-gray-800">{{ subCategory.description }}</Link>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>

            <div class="ml-auto flex items-center gap-2 xl:gap-4">
              <!-- Search Bar - 平板缩小宽度 -->
              <div class="hidden lg:block w-48 xl:w-64">
                <SearchBar />
              </div>

              <!-- Compare Link (暂时注释) -->
              <!-- <Link href="/compare" class="flex items-center text-gray-700 hover:text-gray-900 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
                <span v-if="compareCount > 0" class="ml-1 text-sm font-medium">{{ compareCount }}</span>
              </Link> -->

              <!-- Notification Bell -->
              <div v-if="user" class="flex items-center">
                <NotificationBell />
              </div>

              <!-- User Menu -->
              <div class="ml-4 flow-root lg:ml-6">
                <div v-if="user" class="flex items-center space-x-4">
                  <!-- User Profile -->
                  <div class="relative group">
                    <button class="flex items-center space-x-2 text-sm text-gray-700 hover:text-gray-900">
                      <span>{{ user.name }}</span>
                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                      </svg>
                    </button>
                    
                    <!-- Dropdown Menu -->
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                      <Link :href="route('cart')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center justify-between">
                        <span>购物车</span>
                        <span v-if="cartCount > 0" class="bg-gray-900 text-white text-xs px-2 py-1 rounded-full">{{ cartCount }}</span>
                      </Link>
                      <Link :href="route('coupons.my')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                        我的优惠券
                      </Link>
                      <Link :href="route('profile')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">个人中心</Link>
                      <Link :href="route('addresses.index')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">收货地址</Link>
                      <Link :href="route('orders.index')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">我的订单</Link>
                      <Link :href="route('after-sales.index')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">售后服务</Link>
                      <Link :href="route('settings')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">账户设置</Link>
                      <div class="border-t border-gray-100 my-1"></div>
                      <form @submit.prevent="logout" class="block">
                        <button type="submit" class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                          退出登录
                        </button>
                      </form>
                    </div>
                  </div>
                </div>
                
                <!-- Guest Menu -->
                <div v-else class="flex items-center space-x-4">
                  <Link :href="route('login')" class="text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    登录
                  </Link>
                  <Link :href="route('register')" class="text-sm bg-gray-900 text-white px-4 py-2 rounded-xl hover:bg-gray-800 transition-colors">
                    注册
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>

      <!-- Mobile menu - 优化动画和触摸体验 -->
      <Transition
        enter-active-class="transition-opacity duration-200 ease-out"
        enter-from-class="opacity-0"
        enter-to-class="opacity-100"
        leave-active-class="transition-opacity duration-150 ease-in"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
      >
        <div v-if="mobileMenuOpen" class="lg:hidden">
          <div class="fixed inset-0 z-50 bg-black bg-opacity-25" @click="mobileMenuOpen = false"></div>
        </div>
      </Transition>
      
      <Transition
        enter-active-class="transition-transform duration-300 ease-out"
        enter-from-class="-translate-x-full"
        enter-to-class="translate-x-0"
        leave-active-class="transition-transform duration-250 ease-in"
        leave-from-class="translate-x-0"
        leave-to-class="-translate-x-full"
      >
        <div v-if="mobileMenuOpen" class="lg:hidden fixed inset-y-0 left-0 z-50 w-full max-w-xs bg-white shadow-xl">
          <div class="flex h-16 items-center justify-between px-4 border-b border-gray-200">
            <div class="flex items-center">
              <img src="/images/logo.svg" alt="Orange Tech" class="h-10" />
            </div>
            <button @click="mobileMenuOpen = false" class="rounded-md p-3 text-gray-400 hover:text-gray-500 active:bg-gray-100 transition-colors">
              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          <div class="h-[calc(100vh-4rem)] overflow-y-auto px-4 py-6">
            <!-- 搜索框 - 移到顶部 -->
            <div class="mb-6">
              <SearchBar @close="mobileMenuOpen = false" />
            </div>
            
            <!-- 分类链接 -->
            <div class="space-y-2">
              <div v-for="category in categories" :key="category.id">
                <Link :href="`/categories/${category.slug}`" 
                  class="block py-3 text-base font-medium text-gray-900 hover:bg-gray-100 rounded-lg px-3 -mx-3 active:bg-gray-200 transition-colors" 
                  @click="mobileMenuOpen = false">
                  {{ category.name }}
                </Link>
              </div>
            </div>

            <!-- 用户菜单 -->
            <div v-if="user" class="mt-6 border-t border-gray-200 pt-6">
              <div class="space-y-1">
                <div class="text-sm font-medium text-gray-900 mb-4 px-3">{{ user.name }}</div>
                <Link :href="route('cart')" class="flex items-center justify-between py-3 text-base font-medium text-gray-900 hover:bg-gray-100 rounded-lg px-3 -mx-3 active:bg-gray-200 transition-colors" @click="mobileMenuOpen = false">
                  <span>购物车</span>
                  <span v-if="cartCount > 0" class="bg-gray-900 text-white text-xs px-2 py-1 rounded-full">{{ cartCount }}</span>
                </Link>
                <Link :href="route('coupons.my')" class="block py-3 text-base font-medium text-gray-900 hover:bg-gray-100 rounded-lg px-3 -mx-3 active:bg-gray-200 transition-colors" @click="mobileMenuOpen = false">
                  我的优惠券
                </Link>
                <Link :href="route('profile')" class="block py-3 text-base font-medium text-gray-900 hover:bg-gray-100 rounded-lg px-3 -mx-3 active:bg-gray-200 transition-colors" @click="mobileMenuOpen = false">
                  个人中心
                </Link>
                <Link :href="route('addresses.index')" class="block py-3 text-base font-medium text-gray-900 hover:bg-gray-100 rounded-lg px-3 -mx-3 active:bg-gray-200 transition-colors" @click="mobileMenuOpen = false">
                  收货地址
                </Link>
                <Link :href="route('orders.index')" class="block py-3 text-base font-medium text-gray-900 hover:bg-gray-100 rounded-lg px-3 -mx-3 active:bg-gray-200 transition-colors" @click="mobileMenuOpen = false">
                  我的订单
                </Link>
                <Link :href="route('after-sales.index')" class="block py-3 text-base font-medium text-gray-900 hover:bg-gray-100 rounded-lg px-3 -mx-3 active:bg-gray-200 transition-colors" @click="mobileMenuOpen = false">
                  售后服务
                </Link>
                <Link :href="route('settings')" class="block py-3 text-base font-medium text-gray-900 hover:bg-gray-100 rounded-lg px-3 -mx-3 active:bg-gray-200 transition-colors" @click="mobileMenuOpen = false">
                  账户设置
                </Link>
                <form @submit.prevent="logout" class="block">
                  <button type="submit" class="w-full text-left py-3 text-base font-medium text-red-600 hover:bg-red-50 rounded-lg px-3 -mx-3 active:bg-red-100 transition-colors" @click="mobileMenuOpen = false">
                    退出登录
                  </button>
                </form>
              </div>
            </div>

            <!-- 访客菜单 -->
            <div v-else class="mt-6 border-t border-gray-200 pt-6 space-y-2">
              <Link :href="route('login')" class="block py-3 text-base font-medium text-gray-900 hover:bg-gray-100 rounded-lg px-3 -mx-3 active:bg-gray-200 transition-colors" @click="mobileMenuOpen = false">
                登录
              </Link>
              <Link :href="route('register')" class="block py-3 text-center text-base font-medium bg-gray-900 text-white hover:bg-gray-800 rounded-lg px-3 -mx-3 active:bg-gray-700 transition-colors" @click="mobileMenuOpen = false">
                注册
              </Link>
            </div>
          </div>
        </div>
      </Transition>
    </header>

    <!-- 面包屑导航 - Orange Tech Style -->
    <div v-if="showBreadcrumb" class="bg-gray-100 border-b border-gray-200">
      <div class="max-w-8xl mx-auto px-8 sm:px-16 lg:px-24 py-6">
        <nav class="flex" aria-label="Breadcrumb">
          <ol class="flex items-center space-x-2">
            <li>
              <Link href="/" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200 flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                商店
              </Link>
            </li>
            <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
              <div class="flex items-center">
                <svg class="flex-shrink-0 h-4 w-4 text-gray-400 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
                <span v-if="index === breadcrumbs.length - 1" class="text-sm font-medium text-gray-900">{{ breadcrumb }}</span>
                <Link v-else :href="getBreadcrumbLink(index)" class="text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">{{ breadcrumb }}</Link>
              </div>
            </li>
          </ol>
        </nav>
      </div>
    </div>

    <!-- 页面内容 -->
    <main>
      <slot />
    </main>

        <!-- Footer - Orange Tech Style Minimal -->
        <footer class="bg-gray-100 border-t border-gray-200 mt-auto">
          <div class="mx-auto max-w-8xl px-4 sm:px-8 lg:px-24">
            <!-- 联系信息区 -->
            <div v-if="systemSettings.contact_email || systemSettings.contact_phone" class="py-8 border-b border-gray-200/60">
              <div class="flex flex-col sm:flex-row items-center justify-center gap-6 text-sm text-gray-600">
                <a v-if="systemSettings.contact_email" 
                   :href="`mailto:${systemSettings.contact_email}`" 
                   class="flex items-center gap-2 hover:text-gray-900 transition-colors">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                  </svg>
                  {{ systemSettings.contact_email }}
                </a>
                <span v-if="systemSettings.contact_email && systemSettings.contact_phone" class="hidden sm:block text-gray-300">|</span>
                <a v-if="systemSettings.contact_phone" 
                   :href="`tel:${systemSettings.contact_phone}`" 
                   class="flex items-center gap-2 hover:text-gray-900 transition-colors">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                  </svg>
                  {{ systemSettings.contact_phone }}
                </a>
              </div>
            </div>
            
            <!-- 底部信息 -->
            <div class="py-6">
              <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <!-- Copyright -->
                <p class="text-xs text-gray-500">
                  © {{ new Date().getFullYear() }} {{ systemSettings.site_name || 'Orange Tech' }}. All rights reserved.
                </p>
                
                <!-- 链接 -->
                <div class="flex items-center gap-6 text-xs text-gray-500">
                  <Link :href="route('coupons.index')" class="hover:text-gray-900 transition-colors">优惠券中心</Link>
                  <a href="#" class="hover:text-gray-900 transition-colors">隐私政策</a>
                  <a href="#" class="hover:text-gray-900 transition-colors">服务条款</a>
                  <a href="#" class="hover:text-gray-900 transition-colors">联系我们</a>
                </div>
              </div>
            </div>
          </div>
        </footer>
  </div>
  
  <!-- 通知容器 -->
  <NotificationContainer />
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { Link, router, usePage } from '@inertiajs/vue3'
import NotificationContainer from '@/Components/NotificationContainer.vue'
import NotificationBell from '@/Components/NotificationBell.vue'
import SearchBar from '@/Components/SearchBar.vue'
import { useNotification } from '@/composables/useNotification'

// Props
const props = defineProps({
  showBreadcrumb: {
    type: Boolean,
    default: false
  },
  breadcrumbs: {
    type: Array,
    default: () => []
  }
})

// 获取全局用户数据和系统设置
const page = usePage()
const user = page.props.auth.user
const systemSettings = computed(() => page.props.systemSettings || {})
const categories = computed(() => page.props.categories || [])
const { showSuccess, showError, showInfo } = useNotification()

// 监听 flash 消息
watch(() => page.props.flash, (flash) => {
  if (flash?.success) {
    showSuccess(flash.success)
  }
  if (flash?.error) {
    showError(flash.error)
  }
  if (flash?.info) {
    showInfo(flash.info)
  }
}, { immediate: true, deep: true })

// 购物车数量
const cartCount = ref(page.props.cartCount || 0)

// 对比功能已注释，暂不使用
// const compareCount = ref(0)

// 移动端菜单状态
const mobileMenuOpen = ref(false)
const openMobileCategories = ref([])

// 切换移动端分类展开/收起
const toggleMobileCategory = (categoryId) => {
  const index = openMobileCategories.value.indexOf(categoryId)
  if (index > -1) {
    openMobileCategories.value.splice(index, 1)
  } else {
    openMobileCategories.value.push(categoryId)
  }
}

// 子分类数据（暂时保留用于下拉菜单，后续可以删除）
const subCategories = ref({
  2: [ // Orange Phone
    { id: 1, name: 'Orange Phone 15 Pro', description: '钛金属设计' },
    { id: 2, name: 'Orange Phone 15', description: 'A16 仿生芯片' },
    { id: 3, name: 'Orange Phone 14', description: 'A15 仿生芯片' },
    { id: 4, name: 'Orange Phone SE', description: '经典设计' }
  ],
  3: [ // Orange Book
    { id: 1, name: 'Orange Book Pro', description: 'M3 芯片' },
    { id: 2, name: 'Orange Book Air', description: '轻薄便携' },
    { id: 3, name: 'Orange Book', description: '一体式设计' },
    { id: 4, name: 'Orange Book Studio', description: '专业性能' }
  ],
  4: [ // Orange Pad
    { id: 1, name: 'Orange Pad Pro', description: 'M4 芯片' },
    { id: 2, name: 'Orange Pad Air', description: '轻薄设计' },
    { id: 3, name: 'Orange Pad mini', description: '便携小巧' },
    { id: 4, name: 'Orange Pad', description: '入门选择' }
  ],
  5: [ // Orange Watch
    { id: 1, name: 'Orange Watch Series 9', description: 'S9 芯片' },
    { id: 2, name: 'Orange Watch SE', description: '入门选择' },
    { id: 3, name: 'Orange Watch Ultra', description: '极限运动' },
    { id: 4, name: 'Orange Watch Hermès', description: '奢华合作' }
  ],
  6: [ // Orange Pods
    { id: 1, name: 'Orange Pods Pro', description: '主动降噪' },
    { id: 2, name: 'Orange Pods Max', description: '头戴式' },
    { id: 3, name: 'Orange Pods', description: '经典设计' },
    { id: 4, name: 'Orange Pods (第3代)', description: '空间音频' }
  ]
})

// 获取子分类
const getSubCategories = (categoryId) => {
  return subCategories.value[categoryId] || []
}

// 热门产品数据
const featuredProducts = ref({
  2: [ // Orange Phone
    { id: 1, name: 'Orange Phone 15 Pro', price: '7999', image: '/images/orangephone.jpg' },
    { id: 2, name: 'Orange Phone 15', price: '5999', image: '/images/orangephone.jpg' }
  ],
  3: [ // Orange Book
    { id: 3, name: 'Orange Book Pro 14"', price: '15999', image: 'https://images.unsplash.com/photo-1541807084-5c52b6b3adef?w=400' },
    { id: 4, name: 'Orange Book Air 13"', price: '8999', image: 'https://images.unsplash.com/photo-1541807084-5c52b6b3adef?w=400' }
  ],
  4: [ // Orange Pad
    { id: 5, name: 'Orange Pad Pro 12.9"', price: '8999', image: 'https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=400' },
    { id: 6, name: 'Orange Pad Air 11"', price: '4399', image: 'https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=400' }
  ],
  5: [ // Orange Watch
    { id: 7, name: 'Orange Watch Series 9', price: '2999', image: 'https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400' },
    { id: 8, name: 'Orange Watch Ultra 2', price: '6499', image: 'https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400' }
  ],
  6: [ // Orange Pods
    { id: 9, name: 'Orange Pods Pro (第2代)', price: '1899', image: 'https://images.unsplash.com/photo-1606220945770-b5b6c2c55bf1?w=400' },
    { id: 10, name: 'Orange Pods Max', price: '4399', image: 'https://images.unsplash.com/photo-1606220945770-b5b6c2c55bf1?w=400' }
  ]
})

// 获取热门产品
const getFeaturedProducts = (categoryId) => {
  return featuredProducts.value[categoryId] || []
}

// 获取面包屑链接
const getBreadcrumbLink = (index) => {
  const breadcrumbPaths = {
    0: '/', // 首页
    1: '/products', // 商品列表
    2: '/cart', // 购物车
    3: '/checkout', // 结算
    4: '/profile', // 个人中心
    5: '/orders' // 订单列表
  }
  return breadcrumbPaths[index] || '#'
}

// 退出登录
const logout = () => {
  router.post('/logout')
}

</script>
